<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>星际微博详情站</title>
    <!-- 引入axios和vue的框架文件 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        /* 整体页面的背景及基础样式设定，营造宇宙空间的氛围 */
        body {
            font-family: 'Roboto Mono', sans-serif; /* 选用具有科技感的等宽字体，契合科幻风格 */
            background: linear-gradient(135deg, #000000, #161616); /* 线性渐变背景，模拟宇宙光影变化 */
            margin: 0;
            padding: 0;
            color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* 防止页面内容溢出屏幕 */
            perspective: 1000px; /* 添加透视效果，增强3D感 */
        }

        /* 页面主体容器样式，类似宇宙中的信息展示装置 */
        div {
            background-color: rgba(20, 20, 20, 0.9); /* 半透明深色背景，增加神秘感 */
            border-radius: 20px; /* 较大的圆角，体现科幻风格的圆润感 */
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.6), 0 0 80px rgba(0, 255, 255, 0.4) inset; /* 强烈的外发光与内发光效果 */
            padding: 30px;
            width: 650px;
            animation: containerGlow 1.5s ease infinite alternate; /* 容器的闪烁发光动画 */
            position: relative; /* 相对定位，方便内部元素基于此定位 */
            transform-style: preserve-3d; /* 启用3D空间转换 */
            transition: transform 0.5s ease; /* 添加过渡效果，用于交互时的变换 */
        }

        /* 鼠标悬停时主体容器的3D旋转效果 */
        div:hover {
            transform: rotateY(10deg); /* 绕Y轴旋转一定角度，营造悬浮感 */
        }

        /* 容器闪烁发光动画的关键帧定义 */
        @keyframes containerGlow {
            from {
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.3) inset;
            }

            to {
                box-shadow: 0 0 50px rgba(0, 255, 255, 0.7), 0 0 100px rgba(0, 255, 255, 0.5) inset;
            }
        }

        /* 页面标题样式，打造成醒目且带有科技感的效果 */
        h1 {
            color: #00FFFF; /* 标志性的青蓝色，凸显科幻感 */
            font-size: 36px;
            text-align: center;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.8); /* 发光文字阴影，增强视觉效果 */
            animation: titleAnimation 3s infinite alternate; /* 标题的自定义动画效果 */
            margin: 0; /* 去除默认上下边距，使布局更紧凑 */
            text-transform: uppercase; /* 转换为大写字母，更具科技感 */
            letter-spacing: 2px; /* 增加字母间距，增强视觉效果 */
            position: relative; /* 相对定位，便于添加伪元素装饰 */
        }

        /* 为标题添加底部装饰线，类似科幻界面的分割线效果 */
        h1::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(0, 255, 255, 0.5);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            animation: lineGlow 3s infinite alternate; /* 装饰线的发光动画 */
        }

        /* 标题动画的关键帧定义，实现闪烁、缩放等效果 */
        @keyframes titleAnimation {
            0% {
                text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
                transform: scale(1);
            }

            50% {
                text-shadow: 0 0 30px rgba(0, 255, 255, 1);
                transform: scale(1.05);
            }

            100% {
                text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
                transform: scale(1);
            }
        }

        /* 装饰线发光动画关键帧定义 */
        @keyframes lineGlow {
            0% {
                box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
            }

            50% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }

            100% {
                box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
            }
        }

        /* 微博发布者及内容相关的样式设置 */
        h2 {
            margin-top: 15px;
            margin-bottom: 20px;
            color: #FF69B4; /* 用粉色系突出显示昵称，增添科幻色彩 */
            font-size: 26px;
            display: flex;
            align-items: center;
            position: relative; /* 相对定位，便于添加伪元素效果 */
        }

        h2 span {
            margin-right: 8px;
        }

        h2::before {
            content: "";
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(0, 255, 255, 0.5);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            animation: dotGlow 3s infinite alternate; /* 发布者昵称前的亮点动画 */
        }

        /* 亮点动画关键帧定义 */
        @keyframes dotGlow {
            0% {
                box-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
            }

            50% {
                box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
            }

            100% {
                box-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
            }
        }

        p {
            font-size: 14px;
            color: #888;
            margin-bottom: 20px;
        }

        /* 评论分割线样式，打造简洁且带有科幻感的线条效果 */
        hr {
            border: none;
            border-top: 1px solid rgba(0, 255, 255, 0.2);
            margin: 20px 0;
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); /* 给分割线添加淡淡的发光效果 */
        }

        /* 评论项的整体样式，类似宇宙中的信息卡片，有交互效果 */
        div[v-for="c in arr"] {
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，增强神秘感 */
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            transition: box-shadow 0.3s ease; /* 阴影过渡效果，用于鼠标悬停交互 */
            position: relative; /* 相对定位，便于添加更多交互元素 */
            transform-style: preserve-3d; /* 启用3D空间转换 */
            transition: transform 0.3s ease; /* 添加过渡效果，用于交互时的变换 */
        }

        div[v-for="c in arr"]:hover {
            box-shadow: 0 0 25px rgba(0, 255, 255, 0.5); /* 鼠标悬停时的阴影变化，增强交互感 */
            transform: translateY(-5px); /* 向上移动一点，营造悬浮感 */
        }

        h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #FF4500; /* 橘红色用于突出显示评论者昵称 */
            font-size: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative; /* 相对定位，便于添加伪元素装饰 */
        }

        h4 span {
            margin-right: 8px;
        }

        h4 span[style="float: right"] {
            font-size: 14px;
            color: #888;
        }

        h4::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: rgba(0, 255, 255, 0.2);
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
        }

        /* 评论输入框的样式优化，提升交互体验和科幻感 */
        textarea {
            width: 100%;
            height: 120px;
            border: 1px solid rgba(0, 255, 255, 0.3); /* 淡蓝色边框，体现科幻风格的色彩搭配 */
            border-radius: 12px;
            padding: 15px;
            resize: none;
            background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景，与整体风格统一 */
            color: #fff;
            transition: border-color 0.3s ease; /* 边框颜色过渡效果，增强交互反馈 */
            margin-bottom: 15px;
            position: relative; /* 相对定位，便于添加伪元素效果 */
        }

        textarea:focus {
            border-color: #00FFFF; /* 输入框获取焦点时边框变色，突出显示 */
            outline: none; /* 去除默认的聚焦外框 */
        }

        textarea::placeholder {
            color: rgba(255, 255, 255, 0.5); /* 改变占位文字颜色，更具科幻感 */
            font-style: italic; /* 斜体显示占位文字，增加风格 */
        }

        /* 评论按钮的样式设计，打造炫酷的交互按钮效果 */
        input[type="button"] {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 14px 30px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色和缩放过渡效果 */
            position: relative; /* 相对定位，便于添加点击特效 */
            overflow: hidden; /* 隐藏超出按钮范围的内容 */
            animation: buttonAnimation 2.5s infinite; /* 按钮的发光动画效果 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加初始阴影，增强立体感 */
        }

        /* 按钮发光动画的关键帧定义 */
        @keyframes buttonAnimation {
            0% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
            }

            100% {
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            }
        }

        input[type="button"]:hover {
            background-color: #0056b3;
            transform: scale(1.05); /* 鼠标悬停时按钮放大，增强交互反馈 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 悬停时增加阴影强度，凸显立体效果 */
        }

        input[type="button"]:active::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-color: rgba(0, 255, 255, 0.3); /* 点击按钮时的发光效果 */
            border-radius: 50%;
            opacity: 0;
            animation: buttonClickAnimation 0.8s ease-out; /* 点击按钮后的发光动画 */
        }

        /* 点击按钮发光动画的关键帧定义 */
        @keyframes buttonClickAnimation {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>星际微博详情站</h1>
        <h2><span style="color:mediumvioletred">{{weibo.nickname}}</span>:{{weibo.content}}</h2>
        <p>发布于:{{weibo.created}}</p>
        <hr>
        <div v-for="c in arr">
            <h4>
                <span style="color:red">{{c.nickname}}评论道:</span>{{c.content}}
                <span style="float: right">发布于：{{c.created}}</span>
            </h4>
        </div>

        <textarea cols="30" rows="3" placeholder="输入星际评论..." style="white-space: pre-wrap" v-model="comment.content"></textarea>
        <input type="button" value="发送星际评论" @click="insert()">
    </div>
    <script>
        let v = new Vue({
            el: "body>div",
            data: {
                weibo: {},
                comment: { content: "" },
                arr: []
            },
            methods:{
            insert(){
                // 查看评论表:id(不需要传递)、content、created(服务器生成)
                // user_id(当前登录用户的id)、weibo_id(在weibo对象中获取)
                // 发布评论时需要把当前浏览的微博id添加到评论对象中
                v.comment.weiboId = v.weibo.id;
                // 发请求,发布评论
                axios.post("/v1/comment/insert", v.comment).then(function (response){
                    // 未登录不能评论
                    if (response.data==1){
                        location.reload(); // 刷新页面
                    }else{
                        alert("请先登录");
                        location.href = "/login.html";
                    }
                })
            }
        },
        created: function (){
            axios.get("/v1/weibo/selectById"+location.search).then(function (response){
                v.weibo = response.data;
            })

            // 发请求获取当前微博相关的评论
            // 上面的get()会开线程发请求,主线程会继续往下走
            axios.get("/v1/comment/selectByWeiboId"+location.search).then(function (response){
                v.arr = response.data;
            })
        }
    })
</script>

</body>
</html>